@import "base.less";

body {
  background-color: #fafafa;
  padding-bottom: 20vw;
}

/* header */
header {
  background-color: rgb(194, 20, 1);
  color: #fff;
  font-size: 4.2667vw;
  height: 11.7333vw;
  line-height: 11.7333vw;
  text-align: center;
  font-weight: bold;
}

// search
.search {
  padding: 2.6667vw;
  background-color: #f1f1f2;
  height: 13.3333vw;
  .searchCont {
    width: 100%;
    background-color: #fff;
    .flex;
    justify-content: center;
    i {
      font-size: 3.7333vw;
    }
    p {
      font-size: 3.7333vw;
      height: 8vw;
      line-height: 8vw;
      color: #999;
    }
  }
}

// banner
.banner {
  position: relative;
  .swiper {
    width: 100vw;
    overflow: hidden;
    height: 49.0667vw;
    .swiper-wrapper {
      img {
        height: 100%;
      }
    }
    .swiper-pagination-bullets {
      .swiper-pagination-bullet {
        border-radius: 1.6vw;
        opacity: 1;
        width: 1.6vw;
        height: 1.6vw;
        background-color: #fff;
      }
      .swiper-pagination-bullet-active {
        width: 2.9333vw;
        height: 1.3333vw;
        background-color: #8ed6ee;
      }
    }
  }
}

// ad
.ad {
  position: relative;
  background: rgb(242, 219, 219);
  padding: 1.3333vw 3.2vw;
  height: 9.6vw;
  .flex;
  justify-content: flex-start;
  color: red;
  box-sizing: border-box;
  .iconfont {
    margin-right: 2.6667vw;
  }
  div {
    position: relative;
    overflow: hidden;
    height: 6.9333vw;
    width: 100%;
    p {
      margin-top: 0.5333vw;
      height: 6.9333vw;
      position: absolute;
      left: 0;
      line-height: 6.9333vw;
    }
  }
}

// main
.main {
  .section1 {
    background-color: #fff;
    padding-top: 4.5333vw;
    padding-left: 4.2667vw;
    padding-right: 4.2667vw;
    .flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    a {
      width: 20%;
      div {
        .flex;
        justify-content: center;
        margin: 0 auto;
        width: 10.6667vw;
        height: 10.6667vw;
        .iconfont {
          font-size: 5.3333vw;
          color: #fff;
        }
      }
      p {
        margin-top: 2.6667vw;
        margin-bottom: 4.5333vw;
        font-size: 3.4667vw;
      }
    }
  }
  .section2 {
    img {
      width: 100%;
    }
  }

  .section3 {
    h2 {
      background-color: #fff;
      line-height: 8vw;
      text-align: center;
      padding: 1.3333vw 0;
      font-size: 3.7333vw;
      font-weight: normal;
      margin-bottom: 0.5333vw;
    }
    ul {
      li {
        padding: 10px;
        margin-bottom: 1.6vw;
        background-color: #fff;
        a {
          .flex();
          img {
            width: 32vw;
          }
          .goodCont {
            width: 60%;
            h3 {
              margin-top: 2.6667vw;
              min-height: 9.0667vw;
              line-height: 1.3;
              white-space: normal;
              color: #484848;
              font-size: 3.4667vw;
              font-weight: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .selled {
              color: #999;
              font-size: 3.2vw;
              margin: 1.0667vw 0;
            }
            .price {
              margin-right: 2.1333vw;
              color: #f03c3c;
              font-size: 4vw;
              span {
                color: #999;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}

// footer
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .flex;
  height: 13.0667vw;
  background-color: #fff;
  padding: 2.1333vw 0;
  a {
    width: 20%;
    text-align: center;
    color: #7d7d7d;
    &.iconfont {
      font-size: 5.0667vw;
      color: red;
    }
    &.cur {
      color: red;
    }
    p {
      font-size: 3.2vw;
    }
  }
}
